<template>
  <div class="insurance-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-content">
        <div class="logo-section">
          <div class="logo">国家医保服务平台</div>
          <div class="website">fuwu.nhsa.gov.cn</div>
        </div>
        
        <div class="nav-menu">
          <div class="nav-item active">首页</div>
          <div class="nav-item">服务目录</div>
          <div class="nav-item">国家医保APP</div>
        </div>
        
        <div class="user-section">
          <div class="unit-login">单位登录</div>
          <div class="user-avatar">
            <el-avatar icon="el-icon-user-solid"></el-avatar>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体内容区域 -->
    <div class="main-content">
      <!-- 我的医保板块 -->
      <div class="service-card">
        <div class="card-header">
          <h2>我的医保</h2>
          <div class="more-link">更多&gt;</div>
        </div>
        <div class="card-body">
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="service-name">个人参保信息</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-wallet"></i>
            </div>
            <div class="service-name">个人医保账户</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-notebook-2"></i>
            </div>
            <div class="service-name">个人缴费记录</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
            <div class="service-name">个人消费记录</div>
          </div>
        </div>
      </div>

      <!-- 跨省异地就医查询板块 -->
      <div class="service-card">
        <div class="card-header">
          <h2>跨省异地就医查询</h2>
          <div class="more-link">更多&gt;</div>
        </div>
        <div class="card-body">
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="service-name">跨省住院费用直接结算服务查询</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-first-aid-kit"></i>
            </div>
            <div class="service-name">跨省门诊费用直接结算试点查询</div>
          </div>
        </div>
      </div>

      <!-- 药品和医用耗材招采服务板块 -->
      <div class="service-card">
        <div class="card-header">
          <h2>药品和医用耗材招采服务</h2>
          <div class="more-link">更多&gt;</div>
        </div>
        <div class="card-body">
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-goods"></i>
            </div>
            <div class="service-name">集中带量招采</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-truck"></i>
            </div>
            <div class="service-name">网采与供应配送</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-connection"></i>
            </div>
            <div class="service-name">联动挂网</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-monitor"></i>
            </div>
            <div class="service-name">药品耗材价格监测</div>
          </div>
        </div>
      </div>

      <!-- 单位服务板块 -->
      <div class="service-card">
        <div class="card-header">
          <h2>单位服务</h2>
          <div class="more-link">更多&gt;</div>
        </div>
        <div class="card-body">
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-document-add"></i>
            </div>
            <div class="service-name">2021年国家医保药品目录调整申报</div>
          </div>
          <div class="service-item">
            <div class="service-icon">
              <i class="el-icon-cpu"></i>
            </div>
            <div class="service-name">医保业务综合服务终端（III类）送检申报</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部声明 -->
    <div class="footer">
      <div class="declaration">声明</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Insurance',
  data() {
    return {
      // 可以添加数据属性
    };
  }
};
</script>

<style lang="less" scoped>
.insurance-container {
  // min-height: 100vh;
  background: linear-gradient(135deg, #1a6be0 0%, #0d4ba3 100%);
  color: #fff;
  display: flex;
  flex-direction: column;

  .header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    
    .header-content {
      max-width: 100%;
      // margin: 0 auto;
	  padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .logo-section {
        display: flex;
        align-items: center;
        
        .logo {
          font-size: 20px;
          font-weight: bold;
          margin-right: 10px;
        }
        
        .website {
          font-size: 14px;
          opacity: 0.8;
        }
      }
      
      .nav-menu {
        display: flex;
        
        .nav-item {
          padding: 10px 20px;
          cursor: pointer;
          transition: all 0.3s;
          
          &.active {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
          }
          
          &:hover {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
          }
        }
      }
      
      .user-section {
        display: flex;
        align-items: center;
        
        .unit-login {
          margin-right: 15px;
          padding: 8px 15px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
        }
      }
    }
  }

  .main-content {
    flex: 1;
    padding: 30px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    // max-width: 1200px;
    // margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    
    .service-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      
      .card-header {
        background: linear-gradient(90deg, #1a6be0 0%, #0d4ba3 100%);
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h2 {
          margin: 0;
          font-size: 18px;
          color: #fff;
        }
        
        .more-link {
          color: rgba(255, 255, 255, 0.8);
          cursor: pointer;
          font-size: 14px;
          
          &:hover {
            color: #fff;
          }
        }
      }
      
      .card-body {
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        
        .service-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 12px;
          border-radius: 6px;
          background: #f8f9fc;
          transition: all 0.3s;
          cursor: pointer;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          }
          
          .service-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a6be0 0%, #0d4ba3 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            
            i {
              font-size: 24px;
              color: #fff;
            }
          }
          
          .service-name {
            text-align: center;
            color: #333;
            font-size: 14px;
            line-height: 1.4;
          }
        }
      }
    }
  }

  .footer {
    padding: 20px;
    text-align: center;
    
    .declaration {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .insurance-container {
    .header {
      .header-content {
        flex-direction: column;
        padding: 0 15px;
        
        .logo-section {
          margin-bottom: 15px;
        }
        
        .nav-menu {
          margin-bottom: 15px;
          
          .nav-item {
            padding: 8px 12px;
          }
        }
      }
    }
    
    .main-content {
      grid-template-columns: 1fr;
      
      .service-card {
        .card-body {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .insurance-container {
    .header {
      .header-content {
        .nav-menu {
          flex-wrap: wrap;
          justify-content: center;
        }
        
        .user-section {
          flex-direction: column;
          
          .unit-login {
            margin-right: 0;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>